<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
	</body>
	<script>
		//未运用状态模式的样子
		var trafficLight = (function() {
			var state = '绿灯' // 闭包缓存状态

			return {
				/* 设置交通灯状态 */
				setState: function(target) {
					if(target === '红灯') {
						state = '红灯'
						console.log('交通灯颜色变为 红色，行人通行 & 车辆等待')
					} else if(target === '黄灯') {
						state = '黄灯'
						console.log('交通灯颜色变为 黄色，行人等待 & 车辆等待')
					} else if(target === '绿灯') {
						state = '绿灯'
						console.log('交通灯颜色变为 绿色，行人等待 & 车辆通行')
					} else {
						console.error('交通灯还有这颜色？')
					}
				},

				/* 获取交通灯状态 */
				getState: function() {
					return state
				}
			}
		})()

		trafficLight.setState('红灯') // 输出： 交通灯颜色变为 红色，行人通行 & 车辆等待
		trafficLight.setState('黄灯') // 输出： 交通灯颜色变为 黄色，行人等待 & 车辆等待
		trafficLight.setState('绿灯') // 输出： 交通灯颜色变为 绿色，行人等待 & 车辆通行

		trafficLight.setState('紫灯') // 输出： 交通灯还有这颜色？

		//运用状态模式以后
		/* 抽象状态类 */
		var AbstractState = function() {}

		/* 抽象方法 */
		AbstractState.prototype.employ = function() {
			throw new Error('抽象方法不能调用!')
		}

		/* 交通灯状态类 */
		var State = function(name, desc) {
			this.color = {
				name,
				desc
			}
		}

		State.prototype = new AbstractState()//这已经是用到抽象工厂模式了，还有原型模式
		State.prototype.employ = function(trafficLight) {
			console.log('交通灯颜色变为 ' + this.color.name + '，' + this.color.desc)
			trafficLight.setState(this)
		}

		/* 交通灯类 */
		var TrafficLight = function() {
			this.state = null
		}

		/* 获取交通灯状态 */
		TrafficLight.prototype.getState = function() {
			return this.state
		}

		/* 设置交通灯状态 */
		TrafficLight.prototype.setState = function(state) {
			this.state = state
		}

		// 实例化一个红绿灯
		var trafficLight = new TrafficLight()

		// 实例化红绿灯可能有的三种状态
		var redState = new State('红色', '行人等待 & 车辆等待')
		var greenState = new State('绿色', '行人等待 & 车辆通行')
		var yellowState = new State('黄色', '行人等待 & 车辆等待')

		redState.employ(trafficLight) // 输出： 交通灯颜色变为 红色，行人通行 & 车辆等待
		yellowState.employ(trafficLight) // 输出： 交通灯颜色变为 黄色，行人等待 & 车辆等待
		greenState.employ(trafficLight) // 输出： 交通灯颜色变为 绿色，行人等待 & 车辆通行
		
	</script>

</html>